<template>
	<view>
		<!-- <page-head ref="pageHead" :title="'森歌微商城-订单管理'" :headtype="2"></page-head> -->
		<view class="orderManage">
			<view id="tabsBox" class="tabsBox" :style="'top:'+topHeight+'px'">
				<view style="padding: 0 50rpx;">
					<liuyuno-tabs :tabData="tabs" :defaultIndex="tabIndex" @tabClick='tabClick' :config="tabConfig" />
				</view>
			</view>
		</view>
		<view class="dateChoose" :style="'margin-top:'+pageTop+'px'">
			<text class="txt1">选择日期</text>
			<text class="txt2">2022年</text>
			<text class="txt2">12月</text>
			<text class="txt2">30日</text>
		</view>
		<view class="oList margin30">
			<view class="item" v-for="item in dataList">
				<view class="oTop clearfix">
					<view class="fl">
						<image class="itemImg" src="/static/image/integralIcon4.png"/>
					</view>
					<view class="ml fl">
						<view class="oUserName">森小哥</view>
						<view class="oTime">2023-02-07   已绑定</view>
					</view>
					<view class="oUserTag fr">普通客户</view>
				</view>
				<view class="oBottom">
					<view class="obItem">联系方式：张女士，<text style="color: #216BBF;">18888888</text></view>
					<view class="obItem">地址：浙江绍兴越城区xx小区</view>
					<view class="obItem">购买时间：2022-12-13</view>
					<view class="obItem">购买型号：TX-hdg0</view>
					<view class="obItem">订单金额：￥23562.00</view>
				</view>
			</view>
			<view class="lineSplit">
				<o-divider textColor="#000000" lineColor="#c0c0c1">推广工具</o-divider>
			</view>
			<view class="grid">
				<!-- <uni-grid :column="4" :show-border="false" :square="false">
					<uni-grid-item :index="0">
						<view class="grid-item-box">
							<image class="gridImg" src="/static/image/orderIcon1.png" mode="aspectFill" />
							<view class="gridTxt">数据统计</view>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="1">
						<view class="grid-item-box">
							<image class="gridImg" src="/static/image/orderIcon2.png" mode="aspectFill" />
							<view class="gridTxt">推广海报</view>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="2">
						<view class="grid-item-box">
							<image class="gridImg" src="/static/image/orderIcon3.png" mode="aspectFill" />
							<view class="gridTxt">素材中心</view>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="3">
						<view class="grid-item-box">
							<image class="gridImg" src="/static/image/orderIcon4.png" mode="aspectFill" />
							<view class="gridTxt">分销手册</view>
						</view>
					</uni-grid-item>
				</uni-grid> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTop:0,
				topHeight:0,
				tabConfig: {
					key: 'name',
					fontSize: 26,
					color: '#313131',
					activeColor: '#216BBF',
					// item宽度 0为自动
					itemWidth: 0,
					// 下划线左右边距，文字宽度加边距 rpx
					underLinePadding: 10,
					// 下划线宽度 rpx  注意：设置了此值 underLinePadding 失效
					underLineWidth: 50,
					// 下划线高度 rpx
					underLineHeight: 4,
					// 下划线颜色
					underLineColor: '#216BBF',
				},
				tabIndex:0,
				tabs:['全部','预计','出账','入账','退款'],
				dataList:[1,1,1]
			}
		},
		onLoad() {
			this.$refs.pageHead.getTopHeight()
			var that=this
			uni.getSystemInfo({
			    success: function (res) {
			    	// #ifdef  MP-WEIXIN
					var menu = wx.getMenuButtonBoundingClientRect();
					that.topHeight= menu.top+40
					wx.createSelectorQuery().select('#tabsBox').boundingClientRect(function (rect) {
					  that.pageTop=rect.height
					}).exec()
					// #endif
				}
			}); 
		},
		methods: {
			tabClick(){
				
			}
		}
	}
</script>

<style>
	page{
		background-color: #efefef;
	}
	.tabsBox{
		width: 100%;
		background-color: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}
	.dateChoose{
		background-color: #f8f8f8;
		padding: 0 40rpx;
		height: 116rpx;
		line-height: 116rpx;
	}
	.dateChoose .txt1{
		font-size: 24rpx;
		color: #7D7D7D;
		margin-right: 20rpx;
	}
	.txt2{
		display: inline-block;
		width: 168rpx;
		height: 44rpx;
		background: #DADADA;
		border-radius: 10rpx;
		text-align: center;
		line-height: 44rpx;
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #7D7D7D;
	}
	.oList{
		padding: 28rpx 0 12rpx;
		min-height: 90vh;
	}
	.oList .item{
		margin-bottom: 20rpx;
		background-color: #fff;
		box-shadow: 0px 0px 6rpx 0px rgba(140,140,140,0.43);
		border-radius: 10rpx;
		padding: 38rpx 24rpx 10rpx;
	}
	.itemImg{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	.ml{
		margin-left: 20rpx;
		padding-top: 20rpx;
	}
	.oUserName{
		font-size: 26rpx;
		color: #000000;
	}
	.oTime{
		font-size: 22rpx;
		margin-top: 10rpx;
		color: #999999;
	}
	.oUserTag{
		width: 140rpx;
		height: 58rpx;
		text-align: center;
		line-height: 58rpx;
		background: #eaf1f8;
		border: 1px solid #216BBF;
		border-radius: 50rpx;
		font-size: 24rpx;
		color: #216BBF;
		margin-top: 24rpx;
	}
	.oTop{
		padding-bottom: 10rpx;
		border-bottom: solid 1rpx rgba(0,0,0,0.05);
	}
	.oBottom{
		padding: 20rpx;
	}
	.obItem{
		font-size: 28rpx;
		color: #999999;
		line-height: 65rpx;
	}
	.lineSplit{
		padding: 30rpx 110rpx;
	}
	.grid{
		background-color: #fff;
		padding: 38rpx 0;
		border-radius: 12rpx;
	}
	.gridImg{
		width: 46rpx;
		height: 46rpx;
	}
	.gridTxt{
		font-size: 24rpx;
		color: #000000;
	}
</style>
